<template>
  <!-- <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
  </view> -->
  <view class="content_box">
	  <view class="first-top">
		 <view class="first-mes">
		  			  <img src="../static/images/import/mes_icon.png" alt="" />
		  </view>
		  <swiper class="first-swiper" autoplay="true" interval="true" duration="true">
		  		<swiper-item  key="1">
		  				<view>
							<img class="first_background"src="../static/images/import/top_banner.png"></img>
		  					<!-- <image class="first-text" src="../static/images/import/top_text.png" /> -->
		  				</view>
		  		</swiper-item>
				<swiper-item  key="2">
						<view>
							<img class="first_background"src="../static/images/import/top_banner.png"></img>
							<!-- <image class="first-text" src="../static/images/import/top_text.png" /> -->
						</view>
				</swiper-item>
				<swiper-item  key="3">
						<view>
							<img class="first_background"src="../static/images/import/top_banner.png"></img>
							<!-- <image class="first-text" src="../static/images/import/top_text.png" /> -->
						</view>
				</swiper-item>
		  		</swiper>
				<view class="first-banner">
							<view class="banner-box">
								<img src="../static/images/import/second_new.png"alt="" />
								<text>新手指南</text>
							</view>
							<view class="banner-box">
								<img src="../static/images/import/second_guan.png"alt="" />
								<text>官方咨询</text>
							</view>
							<view class="banner-box">
								<img src="../static/images/import/second_help.png"alt="" />
								<text>帮助中心</text>
							</view>
				</view>
		<!--  
		  <view class="first-mes">
			  <img src="../static/images/import/mes_icon.png" alt="" />
		  </view>
		 <view class="first-text">
			  <img src="../static/images/import/top_text.png" alt="" />
		 </view>
	 -->
	  </view>
	<view class="title-box">
		<text class="title-text">
			报告服务
		</text>
		<text class="more">更多报告 ></text>
	</view>
	<scroll-view  scroll-x="true" :scroll-left="scrollRight" >
		<view class="third-box">
			<view class="third-banner bgc1">
				<view class="detail_text">
					<view class="lit_detail">
						<text>客户查询价</text>
					</view>
				</view>
				<view class="jia">
					<text class="lit_jia">￥</text>
					<text class="big_jia">30</text>
				</view>
			</view>
			<view class="third-banner bgc2">
				<view class="detail_text">
					<view class="lit_detail">
						<text>客户查询价</text>
					</view>
				</view>
				<view class="jia">
					<text class="lit_jia">￥</text>
					<text class="big_jia">30</text>
				</view>
			</view>
			<view class="third-banner bgc3">
				<view class="detail_text">
					<view class="lit_detail">
						<text>客户查询价</text>
					</view>
				</view>
				<view class="jia">
					<text class="lit_jia">￥</text>
					<text class="big_jia">30</text>
				</view>
			</view>
		</view>
		
  </scroll-view>
  <view class="title-box">
  	<text class="title-text">
  		最新消息
  	</text>
  	<text class="more">更多 ></text>
  </view>
  <view class="four_box">
  <view class="four_banner">
  	<view class="four-item">
  		<view class="four-img">
  			<img src="../static/images/import/four_pic1.png" alt="" />
  		</view>
  		<view class="four-text">
  			<view class="four-top">
  				贝融助手 | 个人风险报告数据模块升级通知
  			</view>
  			<view class="four-time">
  				2025-04-25 10:48:11
  			</view>
  		</view>
  	</view>
	<text class="half">
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	</text>
  	<view class="four-item">
  		<view class="four-img">
  			<img src="../static/images/import/four_pic2.png" alt="" />
  		</view>
  		<view class="four-text">
  			<view class="four-top">
				贝融优选重磅来袭，双份收益新玩法报告推广赚更多!
  			</view>
  			<view class="four-time">
  				2025-04-25 10:48:11
  			</view>
  		</view>
  	</view>
  	</view>
  </view>
  <view class="five-box">
  	<view  class="five-top">
		<text class="five-big">
			最新已成交报告 
		</text>
		<text class="five-text">今日已成交<text class="num">3665</text>份</text>
	</view >
	<view class="five-banner">
		<view class="five-item">
			<view class="lit-top">
				151****4724获得了收益
			</view>
			<view class="lit-bottom">
				<text class="num"><text class="money">￥</text>50.49</text>
				<text class="time">5分钟前</text>
			</view>
		</view>

	<view class="five-item">
		<view class="lit-top">
			151****4724获得了收益
		</view>
		<view class="lit-bottom">
			<text class="num"><text class="money">￥</text>50.49</text>
			<text class="time">5分钟前</text>
		</view>
	</view>

	<view class="five-item">
		<view class="lit-top">
			151****4724获得了收益
		</view>
		<view class="lit-bottom">
			<text class="num"><text class="money">￥</text>50.49</text>
			<text class="time">5分钟前</text>
		</view>
	</view>
	
	<view class="five-item">
		<view class="lit-top">
			151****4724获得了收益
		</view>
		<view class="lit-bottom" style="border: none;">
			<text class="num"><text class="money">￥</text>50.49</text>
			<text class="time">5分钟前</text>
		</view>
	</view>
	</view>
  </view>
  </view>
</template>
<script>
	 export default {
		 data() {
		     return {
		 		scrollRight: 0,
				maxScroll:0
		 	}
		   },
		   onReady() {
			   const thirdBox = document.querySelector('.third-box')
			   console.log("1231",thirdBox.scrollWidth)
			 	this.maxScroll = thirdBox.scrollWidth
			   const systemInfo = wx.getSystemInfoSync();
			   const viewportWidth = systemInfo.windowWidth; // 视口宽度（单位：px）
			 
			   const maxNum = this.maxScroll - viewportWidth
			     console.log("12312312",maxNum, this.maxScroll , viewportWidth)
		     // 每隔1秒滚动50px（模拟自动滚动）
		     this.interval = setInterval(() => {
		        if(this.scrollRight < maxNum){
					this.scrollRight = this.scrollRight + 5
				} else{
					this.scrollRight = 0
				}
		     }, 400);
		   },
		   onUnload() {
		     clearInterval(this.interval); // 清除定时器
		   }
	 }
</script>
<style scoped>
	.content_box{
		width:100%;
		height:auto;
		padding: 0;
		margin: 0;
	}
	.first-top{
		width: 100%;
		height: 84vw;
		position: relative;
	}
	.first-mes{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: end;
		position: absolute;
		top: 4vw;
		left: -4vw;
		z-index: 1;
	}
	.first-mes img{
		width: 5vw;
		height: auto;
	}
	.first-swiper{
		width: 100%;
		height: 84vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.first_background{
		width: 100vw;
		height: auto;
	}
	.first-text{
		width: 100%;
		height: 84vw;
		background-image: url(../static/images/import/top_banner.png);
		position: relative;
		background-size: 100% auto;
		background-repeat: no-repeat;
		z-index: -2;
	}
	.first-text img{
		width: 60%;
		height: auto;
		position: absolute;
		top: 15vw;
		left: 5vw;
		z-index: -1;
	}
	.first-banner{
		margin-top:6vw;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		gap: 3%;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.banner-box{
		width:  28%;
		height: 30vw;
		/* background-color: #fff; */
		border-radius: 5vw;
		background-image: url(../static/images/import/second_backgroung.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.banner-box img{
		width: 50%;
		height: auto;
	}
	.banner-box text{
		font-size: 4vw;
	}
	.title-box{
		padding: 0 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 3vw 0;
		/* background-color: pink; */
	}
	.title-text{
		font-size: 5vw;
		font-weight: bold;
	}
	.more{
		font-size: 4vw;
		color: #838486;
	}
	.third-box{
		display: flex;
		gap: 2vw;
		margin: 0 4vw;
	}
	.third-banner{
		width: 40vw;
		height: 45vw;
		/* background-color: hotpink; */
		/* margin: 0 1vw; */
		margin-bottom: 1vw;
		flex-shrink:0;
		flex-grow:0;
		position: relative;
		
	}
	.bgc1{
		background-image: url(../static/images/import/third_danger.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.bgc2{
		background-image: url(../static/images/import/third_love.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.bgc3{
		background-image: url(../static/images/import/third_home.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.detail_text{
		width: 55%;
		height: 7vw;
		color: #fff;
		font-size: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.jia{
		width: 45%;
		height: 8vw;
		color: #a25122;
		display: flex;
		/* opacity: 0.6; */
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.lit_jia{
		font-size: 4vw;
		margin-left: -2vw;
	}
	.big_jia{
		font-size: 6vw;
		font-weight: bold;
	}
	.four_box{
		padding: 0 3vw;
		
	}
	.four_banner{
		background-color: #fff;
		border-radius:  5vw;;
		margin-bottom: 3vw;
	}
	.four-item{
		height: 25vw;
		padding: 0 3vw;
		display: flex;
		justify-content: center;
		gap: 5vw;
		align-items: center;
	}
	.four-img{
		height: 20vw;
		width: 20vw;
	}
	.four-img img {
		width: 100%;
		height: 100%;
	}
	.four-text{
		width: 67vw;
		height: 20vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.four-top{
		display: flex;
		align-items: center;
		font-size: 4vw;
		font-weight: bold;
		
	}
	.four-time{
		font-size: 4vw;
		color:#a6a6a6;
	}
	.half{
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #c3c3c3;
		font-size: 3vw;
	}
	.five-box{
		margin: 0 3vw;
		width: 94vw;
		height: 66vw;
		padding: 2vw 4vw;
		margin-bottom: 3vw;
		background-image: url(../static/images/import/five_background.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.five-big{
		font-size: 5vw;
		font-weight: bold;
		color: #366279;
		margin-right: 3vw;
	}
	.five-text{
		font-size: 4vw;
	}
	.num{
		color: #d1915d;
		font-size: 4vw;
		font-weight: bold;
	}
	.five-banner{
		margin-top: 2vw;
		width: 100%;
		height: 54vw;
		background-color: #fff;
		border-radius: 5vw;
		display: flex;
		flex-direction: column;
	}
	.five-item{
		width: 100%;
		height: 25%;
		padding: 2vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
		
	}

	.lit-top{
		width: 100%;
		font-size: 4vw;
		/* padding:2vw; */
		text-align: left;
	}
	.lit-bottom{
		width: 100%;
		/* padding:2vw; */
		font-size: 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dashed #c3c3c3;
	}
	 .time{
		color: #a6a6a6;
	}
	.money{
		font-size: 3vw;
	}
 /* .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  } */
</style>
